<!DOCTYPE html>
<html>
<head>
	<title>three-mesh-ui | examples</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>

		:root {
			--navbar-height: 60px;
			--dark-colour: #262626;
			--github-btn-offset: 20px;
		}

		* {
			margin: 0;
			padding: 0;
			font-family: "Courier New", Courier, monospace;
			color: var(--dark-colour);
			box-sizing: border-box;
		}

		body {
			overflow: hidden;
		}

		h1 {
			font-size: 1.75em;
			font-weight: 600;
		}

		h2 {
			font-size: 1.4em;
			font-weight: 600;
		}

		#page {
			position: fixed;
			height: 100%;
			width: 100%;
			display: flex;
		}

		#menu {
			position: relative;
			height: 100%;
			min-width: 270px;
			border-right: solid 1px var(--dark-colour);
			transition: height 0.26s;
			overflow-y: auto;
		}

		li {
			font-size: 1.1em;
			padding: 4px 10px;
			margin: 10px 0;
			border-radius: 3px;
		}

			li:hover {
				cursor: pointer;
				background-color: #e6e6e6;
			}

			li.selected-view {
				background-color: var(--dark-colour);
				color: #ffffff;
			}

		ul {
			margin-top: 10px;
			border-top: solid 1px var(--dark-colour);
			list-style-type: none;
		}

			#example-code-icon {
				width: 25px;
				margin-right: 10px;
			}

		#github-link-menu {
			display: flex;
			align-items: center;
			color: white;
			background-color: var(--dark-colour);
			text-decoration: none;
			margin: 8px 0 30px 0;
			padding: 5px 10px;
			font-size: 1.1em;
			box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
			border-radius: 3px;
		}

			#menu-icon {
				width: 28px;
				margin-right: 10px;
			}

		#iframe-container {
			position: relative;
			height: 100%;
			width: 100%;
			background-color: grey;
		}

			#iframe-container>iframe {
				position: relative;
				height: 100%;
				width: 100%;
				z-index: 1;
			}

			#iframe-container>img {
				position: absolute;
				height: 50px;
				width: 50px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			#iframe-container>a {
				position: absolute;
				display: flex;
				align-items: center;
				right: var(--github-btn-offset);
				bottom: 20px;
				z-index: 2;
				color: white;
				background-color: var(--dark-colour);
				text-decoration: none;
				padding: 5px 10px;
				font-size: 1.1em;
				box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
				border-radius: 3px;
			}

				#iframe-container>a:hover {
					background-color: #424242;
				}

		#examples-container {
			padding: 20px;
			max-height: calc( 100% - 60px );
			overflow-y: auto;
		}

		#navbar-container {
			display: none;
			top: 0;
			left: 0;
			height: 60px;
			width: 100%;
			border-bottom: solid 1px var(--dark-colour);
			justify-content: flex-end;
			align-items: center;
		}

		button {
			background-color: #e0e0e0;
			border: none;
			padding: 9px 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			outline: none;
			margin-right: 15px;
			box-shadow: 1.5px 1.5px 4px rgba(0,0,0,0.75);
			transition: box-shadow 0.12s;
		}

			button:active {
				box-shadow: none;
			}

		@media screen and (max-width: 768px) {

			#page {
				flex-direction: column;
			}

			#menu {
				height: var(--navbar-height);
				width: 100%;
				border-right: none;
				overflow-y: hidden;
			}

			#navbar-container {
				display: flex;
			}

			#iframe-container {
				height: calc( 100% - var(--navbar-height) );
				width: 100vw;
			}

		}

	</style>
</head>

<body>

	<div id="page">

		<div id="menu">

			<div id="navbar-container">
				<button id="toggle-btn" onclick="toggleNavbar()">
					more examples ▼
				</button>
			</div>

			<div id="examples-container">
				<h1>three-mesh-ui</h1>
				<a
				id="github-link-menu"
				href="https://github.com/felixmariotto/three-mesh-ui"
				target="_blank"
				>
					<img id="menu-icon" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/github-white-icon.png">
					Github page
				</a>

				<h2>examples</h2>
				<ul>
					<%= htmlWebpackPlugin.options.pages %>
				</ul>
			</div>

		</div>

		<div id="iframe-container">

			<iframe
			src="./basic_setup.html"
			allowfullscreen
			allowvr
			frameBorder="0"
			></iframe>

			<img src="https://felixmariotto.s3.eu-west-3.amazonaws.com/loading-three-mesh-ui.gif">

			<a
			id="github-link"
			href=""
			target="_blank"
			>
				<img id="example-code-icon" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/github-white-icon.png">
				code on Github
			</a>

		</div>

	</div>

	<script>

		const root = document.documentElement;
		const btn = document.getElementById('toggle-btn');
		const link = document.getElementById('github-link');
		const iframe = document.querySelector('iframe');

		let navbarIsClosed = true;

		const hash = window.location.hash.substr(1);

		if ( hash === "" ) window.location.hash = "basic_setup";

		// let hash = window.location.hash.substring(1);
		//console.log( hash )
		
		function toggleNavbar() {

			if ( navbarIsClosed ) {

				root.style.setProperty('--navbar-height', '100%');
				root.style.setProperty('--github-btn-offset', '-300px');
				btn.innerHTML = "hide examples ▲";

			} else {

				root.style.setProperty('--navbar-height', '60px');
				root.style.setProperty('--github-btn-offset', '20px');
				btn.innerHTML = "more examples ▼";

			};

			navbarIsClosed = !navbarIsClosed

		};

		//

		document.querySelectorAll('li').forEach( (node)=> {

			if ( node.title === hash ) selectView( node );

			node.onclick = ()=> {

				selectView( node );

				if ( !navbarIsClosed ) {
					toggleNavbar();
				};

			};

		});

		//

		window.addEventListener('popstate', () => {

			let hash = window.location.hash.substring(1);

			iframe.src = `./${ hash }.html`;

			link.href = `https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/${ hash }.js`

		})

		//

		function selectView( listItem ) {

			iframe.src = `./${ listItem.title }.html`;
			link.href = `https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/${ listItem.title }.js`

			window.location.hash = listItem.title;
	
			document.querySelectorAll('li').forEach( (node)=> {

				if ( node === listItem ) {

					node.classList.add('selected-view');

				} else {

					node.classList.remove('selected-view');

				};

			});

		};

	</script>

</body>
</html>